import { init } from './node_modules/snabbdom/build/package/init.js';
import { h } from './node_modules/snabbdom/build/package/h.js';
import { classModule } from './node_modules/snabbdom/build/package/modules/class.js';
import { datasetModule} from './node_modules/snabbdom/build/package/modules/dataset.js'

let patch = init([
    classModule,datasetModule

]);
let app = document.querySelector('#app');
let addBtn  = document.querySelector('#add');
let sortBtn = document.querySelector('#sort');
let oldVnode = app;
let r = 1;
let data = [
    h('li',{key: 1, dataset: {a: Math.random()}, class: {'item': true }}, '11111'),
    h('li',{key: 2, dataset: {a: Math.random()}, class: {'item': true }}, '22222'),
    h('li',{key: 3, dataset: {a: Math.random()}, class: {'item': true }}, '33333'),
    h('li',{key: 4, dataset: {a: Math.random()}, class: {'item': true }}, '44444'),
];
let newdata = [
    data[0],
    data[1],
    data[2],
    data[3],
];

let vnode = h('ul',data);
oldVnode = patch(app,vnode);


addBtn.onclick = function(){
    let s = newdata.length + 1;
    let node = h('li',{key: s, class: {'item': true }}, (s + '').padStart(5,s));
    newdata.push(node);

    vnode = h('ul',newdata.concat());
    oldVnode = patch(oldVnode,vnode);
};

sortBtn.onclick = function(){
    r = -r;
    newdata.sort((a,b) => {
        if(r > 0){
            return a.key - b.key;
        }else {
            return b.key - a.key;
        }
    });
    vnode = h('ul',newdata.concat());
    oldVnode = patch(oldVnode,vnode);
};
